<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员简历 - GitHub风格</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --github-gray: #f6f8fa;
            --github-border: #e1e4e8;
            --github-text: #24292e;
            --github-blue: #0366d6;
            --github-green: #28a745;
            --github-purple: #6f42c1;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #fff;
            color: var(--github-text);
            line-height: 1.6;
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid var(--github-border);
            margin-bottom: 20px;
        }
        
        .profile {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid var(--github-border);
            overflow: hidden;
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .name {
            font-size: 24px;
            font-weight: 600;
        }
        
        .title {
            color: #586069;
            font-size: 20px;
            font-weight: 300;
        }
        
        .contact {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        main {
            flex: 2;
        }
        
        aside {
            flex: 1;
            min-width: 250px;
        }
        
        section {
            background-color: var(--github-gray);
            border: 1px solid var(--github-border);
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 20px;
        }
        
        h2 {
            font-size: 20px;
            padding-bottom: 10px;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--github-border);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        h3 {
            font-size: 18px;
            margin: 10px 0 5px;
        }
        
        .experience-item, .project-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--github-border);
        }
        
        .experience-item:last-child, .project-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .date {
            color: #586069;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .skill-tag {
            background-color: #dbedff;
            color: var(--github-blue);
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }
        
        .social-links a {
            color: var(--github-text);
            font-size: 20px;
            transition: color 0.3s;
        }
        
        .social-links a:hover {
            color: var(--github-blue);
        }
        
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            header {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            
            .profile {
                flex-direction: column;
            }
            
            .contact {
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="profile">
            <div class="avatar">
                <img src="https://avatars.githubusercontent.com/u/583231?v=4" alt="程序员头像">
            </div>
            <div>
                <h1 class="name">张三</h1>
                <p class="title">全栈开发工程师</p>
            </div>
        </div>
        <div class="contact">
            <div class="contact-item">
                <i class="fas fa-envelope"></i>
                <span>zhangsan@example.com</span>
            </div>
            <div class="contact-item">
                <i class="fas fa-phone"></i>
                <span>+86 138 0011 0000</span>
            </div>
            <div class="contact-item">
                <i class="fas fa-map-marker-alt"></i>
                <span>中国，北京</span>
            </div>
        </div>
    </header>
    
    <div class="container">
        <main>
            <section class="about">
                <h2><i class="fas fa-user"></i> 个人简介</h2>
                <p>热爱编程的全栈开发工程师，拥有5年Web开发经验。擅长使用JavaScript、React和Node.js构建高性能的Web应用程序。对新技术充满好奇，喜欢解决复杂问题并在工作中不断学习。</p>
            </section>
            
            <section class="experience">
                <h2><i class="fas fa-briefcase"></i> 工作经历</h2>
                <div class="experience-item">
                    <h3>高级全栈工程师 - ABC科技有限公司</h3>
                    <div class="date">2020年3月 - 至今</div>
                    <p>负责公司核心产品的设计与开发，使用React和Node.js构建可扩展的Web应用程序。带领5人前端团队，完成从概念到部署的整个开发周期。</p>
                </div>
                <div class="experience-item">
                    <h3>Web开发工程师 - XYZ互联网公司</h3>
                    <div class="date">2018年6月 - 2020年2月</div>
                    <p>参与开发多个大型电商平台，主要负责前端界面开发和性能优化。使用Vue.js和Element UI构建响应式用户界面。</p>
                </div>
            </section>
            
            <section class="projects">
                <h2><i class="fas fa-code-branch"></i> 项目经验</h2>
                <div class="project-item">
                    <h3>企业资源规划系统</h3>
                    <p>基于React和Node.js开发的全面ERP解决方案，包含人力资源管理、财务管理和库存管理模块。项目团队规模12人，我担任技术负责人。</p>
                </div>
                <div class="project-item">
                    <h3>电子商务平台重构</h3>
                    <p>主导将传统jQuery电商网站重构为基于Vue.js的现代化SPA应用，使页面加载速度提升40%，用户交互体验显著改善。</p>
                </div>
            </section>
        </main>
        
        <aside>
            <section class="skills">
                <h2><i class="fas fa-code"></i> 技能专长</h2>
                <div class="skills">
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">TypeScript</span>
                    <span class="skill-tag">React</span>
                    <span class="skill-tag">Vue.js</span>
                    <span class="skill-tag">Node.js</span>
                    <span class="skill-tag">Express</span>
                    <span class="skill-tag">MongoDB</span>
                    <span class="skill-tag">MySQL</span>
                    <span class="skill-tag">Git</span>
                    <span class="skill-tag">Docker</span>
                    <span class="skill-tag">AWS</span>
                    <span class="skill-tag">CI/CD</span>
                </div>
            </section>
            
            <section class="education">
                <h2><i class="fas fa-graduation-cap"></i> 教育背景</h2>
                <div class="education-item">
                    <h3>计算机科学与技术 硕士</h3>
                    <div class="date">2015年 - 2018年</div>
                    <p>北京大学</p>
                </div>
                <div class="education-item">
                    <h3>软件工程 学士</h3>
                    <div class="date">2011年 - 2015年</div>
                    <p>南京大学</p>
                </div>
            </section>
            
            <section class="languages">
                <h2><i class="fas fa-language"></i> 语言能力</h2>
                <p>中文 - 母语</p>
                <p>英语 - 流利 (TOEFL 105)</p>
                <p>日语 - 基础 (N3)</p>
            </section>
            
            <section class="social">
                <h2><i class="fas fa-link"></i> 社交链接</h2>
                <div class="social-links">
                    <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
                    <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
                    <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="#" title="个人博客"><i class="fas fa-blog"></i></a>
                </div>
            </section>
        </aside>
    </div>
</body>
</html>